<template>
<Category :scene="scene"></Category>
<el-form style="margin: 8px 0;">
    <el-form-item label="添加属性" >
        <el-button type="primary" style="width: 100px;"  @click="tianji">
            <el-icon><Plus /></el-icon>
        </el-button>
         <el-button type="danger" style="width: 100px;"  @click="quxiao">
            <el-icon><CircleClose /></el-icon>
        </el-button>
    </el-form-item>
     <el-table  style="width: 100%" border  :data="records">
     <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                    <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
    
          <el-table-column label="SPU操作">
                        <!-- row:即为已有的SPU对象 -->
                        <template #="{ row, $index }">
                            <el-button type="primary" size="small" icon="Plus" title="添加SKU"
                                @click="addSku(row)"></el-button>
                            <el-button type="primary" size="small" icon="Edit" title="修改SPU"
                                @click="updateSpu(row)"></el-button>
                            <el-button type="primary" size="small" icon="View" title="查看SKU列表"
                                @click="findSku(row)"></el-button>
                            <el-popconfirm :title="`你确定删除${row.spuName}?`" width="200px" @confirm="deleteSpu(row)">
                                <template #reference>
                                    <el-button type="primary" size="small" icon="Delete" title="删除SPU"></el-button>
                                </template>
                            </el-popconfirm>

                        </template>
                 
        </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]"
                    :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total"
                    @current-change="getHasSpu" @size-change="changeSize" />
    </el-form>
</template>
<script setup lang="ts">
import { onMounted, ref ,watch} from "vue";
import Category from "./Category/index.vue";
import { reqC1,reqC2,reqC3 } from "@/api/product/attr/index";
import { reqHasSpu } from "@/api/product/spu";
import  useCategoryStore  from "@/stores/module/category";
let categoryStore = useCategoryStore();
// const catelist=ref([])
// onMounted(()=>{
// getqc1()
// })
// const getqc1=async()=>{
//    const res= await reqC1()
//   catelist.value=res.data
//   console.log(catelist.value)

// }
const scene=ref(0)
const records=ref()
const total=ref()
let pageSize = ref<number>(3);
const pageNo=ref()

watch(() => categoryStore.c3Id, () => {
    //当三级分类发生变化的时候清空对应的数据
    records.value = [];
    //务必保证有三级分类ID
    if (!categoryStore.c3Id) return;
    getHasSpu();
});
const tianji=()=>{
    scene.value=1
}
const quxiao=()=>{
     scene.value=0
}
const getHasSpu = async (pager = 1) => {
    //修改当前页码
    pageNo.value = pager;
    let result = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id);
    if (result.code == 200) {
        records.value = result.data.records;
        total.value = result.data.total;
    }
}
const addSku=(row)=>{

}
const updateSpu=(row)=>{

}
const findSku=(row)=>{

}
const deleteSpu=(row)=>{

}
</script>
<style scoped>
</style>